﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="exemplo_SS_Manual.aspx.cs" 
    Inherits="WebApplication1.exemplo_SS_Manual" %>

<%@ Register Assembly="Libero.FusionCharts" Namespace="Libero.FusionCharts.Control" TagPrefix="fcl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
        	font-family: Calibri, Arial, Tahoma;
        }
    .container
    {
    	width:800px;
    	border:solid 1px #ccc;
    	padding-top: 10px;
    	padding-bottom:10px;
    }
 p.MsoNormal
	{margin-top:0cm;
	margin-right:0cm;
	margin-bottom:10.0pt;
	margin-left:0cm;
	line-height:115%;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	}
pre
	{margin-bottom:.0001pt;
	font-size:10.0pt;
	font-family:"Courier New";
	        margin-left: 0cm;
            margin-right: 0cm;
            margin-top: 0cm;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>Single Series Chart, adding data manually.</h3>

        <fcl:FChart runat="server" ID="chtTopSalles" Width="530" Height="300" />
        <br />
        <br />
        In your ASPX page you simply need to add a FChart control. It acts just as a place holder for the chart. 
        <br />
        Here you’ll also define the width and height of your chart.
        <div class="container">
        
            <pre><span style="font-family: Consolas; background: yellow">&lt;%</span><span 
                style="font-family:Consolas;color:blue">@</span><span 
                style="font-family:Consolas">&nbsp;<span style="color:maroon">Register</span>&nbsp;<span 
                style="color:red">Assembly</span><span style="color:blue">=&quot;Libero.FusionCharts&quot;</span>&nbsp;<span 
                style="color:red">Namespace</span><span style="color:blue">=&quot;Libero.FusionCharts.Control&quot;</span>&nbsp;</span><span style="font-family:Consolas;color:red">TagPrefix</span><span style="font-family:
Consolas;color:blue">=&quot;fcl&quot;</span><span style="font-family:Consolas">&nbsp;<span 
                style="background: yellow">%&gt;</span></span><o:p>&nbsp;</o:p></pre>
            <pre><o:p></o:p></pre>
            <p class="MsoNormal" 
                style="margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal;tab-stops:45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">
                <br /><span style="font-size:10.0pt;font-family:Consolas;mso-fareast-font-family:&quot;Times New Roman&quot;;
mso-bidi-font-family:&quot;Courier New&quot;;color:blue;mso-fareast-language:EN-CA">&lt;</span><span style="font-size:10.0pt;font-family:Consolas;mso-fareast-font-family:&quot;Times New Roman&quot;;
mso-bidi-font-family:&quot;Courier New&quot;;color:maroon;mso-fareast-language:EN-CA">fcl</span><span style="font-size:10.0pt;font-family:Consolas;mso-fareast-font-family:&quot;Times New Roman&quot;;
mso-bidi-font-family:&quot;Courier New&quot;;color:blue;mso-fareast-language:EN-CA">:</span><span style="font-size:10.0pt;font-family:Consolas;mso-fareast-font-family:&quot;Times New Roman&quot;;
mso-bidi-font-family:&quot;Courier New&quot;;color:maroon;mso-fareast-language:EN-CA">FChart</span><span style="font-size:10.0pt;font-family:Consolas;mso-fareast-font-family:&quot;Times New Roman&quot;;
mso-bidi-font-family:&quot;Courier New&quot;;mso-fareast-language:EN-CA">&nbsp;<span 
                    style="color:red">runat</span><span style="color:blue">=&quot;server&quot;</span>&nbsp;<span 
                    style="color:red">ID</span><span style="color:blue">=&quot;chtTopSalles&quot;</span>&nbsp;<span 
                    style="color:red">Width</span><span style="color:blue">=&quot;530&quot;</span>&nbsp;<span 
                    style="color:red">Height</span><span style="color:blue">=&quot;300&quot;</span>&nbsp;<span 
                    style="color:blue">/&gt;</span><o:p></o:p></span></p>
            <p class="MsoNormal" 
                style="margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal;tab-stops:45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">
                <o:p></o:p>
            </p>
            <p class="MsoNormal" 
                style="margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal;tab-stops:45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt">
                <o:p></o:p></p>
        
        </div>

        <br /><br />
        In your code behind you will define:
        <ul>
            <li>The type of chart you want (see supported charts).</li>
            <li>All appearence properties, as backgroung color, titles, and so on.</li>
            <li>And the main part, the data.</li>
        </ul>
        <div class="container">

            <pre><span style="font-family:Consolas;color:green">//&nbsp;Create&nbsp;a&nbsp;chart of the type you want</span><span 
                style="font-family:Consolas">
<span style="color:#2B91AF">Column3DChart</span>&nbsp;oChart&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;<span 
                style="color:#2B91AF">Column3DChart</span>();

<span style="color:green">//&nbsp;Set&nbsp;properties</span>
oChart.Background.BgColor&nbsp;=&nbsp;<span style="color:#A31515">&quot;ffffff&quot;</span>;
oChart.ChartTitles.Caption&nbsp;=&nbsp;<span style="color:#A31515">&quot;Top&nbsp;seller&quot;</span>;
oChart.ChartTitles.SubCaption&nbsp;=&nbsp;<span style="color:#A31515">&quot;November&quot;</span>;

<span style="color:green">//&nbsp;Set&nbsp;a&nbsp;template</span>
oChart.Template&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;Libero.FusionCharts.Template.<span 
                style="color:#2B91AF">OfficeTemplate</span>();

<span style="color:green">//&nbsp;Set&nbsp;data for a Single Series chart</span>
<span style="color:blue">foreach</span>&nbsp;(<span style="color:#2B91AF">Sales</span>&nbsp;s&nbsp;<span 
                style="color:blue">in</span>&nbsp;GetSales())
{
&nbsp;&nbsp;&nbsp;&nbsp;oChart.Set.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">SSSetElement</span>&nbsp;{&nbsp;Name&nbsp;=&nbsp;s.SalesmanName,&nbsp;Value&nbsp;=&nbsp;s.TotalSold,&nbsp;ShowName&nbsp;=&nbsp;<span 
                style="color:blue">true</span>&nbsp;});
}

<span style="color:green">//&nbsp;Add&nbsp;trend&nbsp;lines</span>
oChart.TrendLines.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">TrendLineElement</span>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;StartValue&nbsp;=&nbsp;500,&nbsp;EndValue&nbsp;=&nbsp;510,&nbsp;Color&nbsp;=&nbsp;<span style="color:#A31515">&quot;00FF00&quot;</span>,&nbsp;DisplayValue&nbsp;=&nbsp;<span 
                style="color:#A31515">&quot;Very&nbsp;good&quot;</span>&nbsp;}
);
oChart.TrendLines.Add(<span style="color:blue">new</span>&nbsp;<span style="color:#2B91AF">TrendLineElement</span>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;StartValue&nbsp;=&nbsp;200,&nbsp;EndValue&nbsp;=&nbsp;210,&nbsp;Color&nbsp;=&nbsp;<span style="color:#A31515">&quot;FF0000&quot;</span>,&nbsp;DisplayValue&nbsp;=&nbsp;<span 
                style="color:#A31515">&quot;Very&nbsp;bad&quot;</span>&nbsp;}
);
<span style="mso-spacerun:yes">&nbsp;</span>
<span style="color:green">//&nbsp;Link&nbsp;the&nbsp;WebControl&nbsp;and&nbsp;the&nbsp;Chart</span>
chtTopSalles.ShowChart(oChart);<o:p></o:p></span></pre>

        </div>
    </div>
    <br /><br />
    </form>
</body>
</html>
